<template>
	<view class="">
		<view class="h-100 bg-white e-p-t-30 e-p-l-20 e-p-r-20">
			<e-search v-model="keyword" :show-action="false" :search-icon-color="AppSkin.primary"
				:placeholder="$t('order.请输入会员昵称搜索')" @search="search"></e-search>
		</view>
		<view class="">
			<scroll-view class="scroll-view-box" scroll-y @scrolltolower="getData" lower-threshold="60">
				<view class="e-p-20">
					<OrderItem v-for="item in list" :info="item" :key="item.id" :statusText="statusTextList">
					</OrderItem>
				</view>
				<load-more v-if="!isEmpty" :showLoad="showLoad"></load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { getTeamRewardLog } from '@/common/request/api'
	import OrderItem from './child/order-item.vue'
	import { useCurrentInstance, useQueryPage } from '@/common/hooks'
	import { useOrder } from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	import type { DictsItem } from '@/common/request/api'


	const ctx = useCurrentInstance()

	const orderStore = useOrder()
	const {
		orderStatusText
	} = storeToRefs(orderStore)

	const keyword = ref('')

	const {
		showLoad,
		isEmpty,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getTeamRewardLog

	})

	const search = () => {
		handleRefresh({
			userNickName: keyword.value
		})
	}
	const getData = () => {
		handleQueryPage({
			userNickName: keyword.value
		})
	}
	search()
	if (!orderStatusText.value.length) {
		orderStore.getOrderStatusText()
	}

	const statusTextList = computed(() => {
		if (orderStatusText.value && orderStatusText.value.length) {
			const arr : DictsItem[] = JSON.parse(JSON.stringify(orderStatusText.value))
			arr.forEach(item => {
				if (item.dictValue === '0') {
					item.dictLabel = ctx.$t('polo.待付款')
				}
				if (item.dictValue === '1') {
					item.dictLabel = ctx.$t('polo.已付款')
				}
				if (item.dictValue === '3') {
					item.dictLabel = ctx.$t('polo.已收货')
				}
			})
			return arr
		}
		return []
	})
</script>

<style scoped lang="scss">
	.h-100 {
		height: 100rpx;
	}

	.scroll-view-box {
		height: calc(100vh - 100rpx);
	}
</style>